<template>
  <div class="">
    <van-tabs v-model="active" @click="dj">
      <van-tab
        v-for="(item, index) in fenlei"
        :key="index"
        :title="item.category_name"
      ></van-tab>
    </van-tabs>
    <ul id="ull">
      <li v-for="(item, index) in list" :key="index">
        <van-image :src="item.product_picture">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>

        <p>{{ item.product_name }}</p>
        <p>￥{{ item.product_price }}</p>
        <p>{{ item.product_intro }}</p>
        <van-icon name="star-o" size="30" @click="addcoll(item)" />
        <van-icon name="shopping-cart-o" size="30" @click="add(item)" />
      </li>
    </ul>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      active: 0,
      fenlei: [],
      list: [],
    };
  },
  mounted() {
    this.$axios.post("/product/getCategory").then((res) => {
      // console.log(res);
      this.fenlei = res.data.category;
    });
    this.dj();
  },
  methods: {
    dj() {
      this.$axios.post("/product/getAllProduct").then((res) => {
        // console.log(res);
        this.list = res.data.Product.filter((item) => {
          return item.category_id == this.active + 1;
        });
      });
    },
    // 添加购物车
    add(val) {
      this.$store.commit("add", val);
      Toast("成功添加购物车");
    },
    addcoll(val) {
      this.$store.commit("addcoll", val);
      // Toast("成功添加收藏");
    },
  },
};
</script>

<style lang="scss">
#ull {
  width: 100%;
  background: aqua;
  li {
    width: 30%;
    height: 450px;
    // border: black 1px solid;
    float: left;
    margin: 15px;
    transition-duration: 0.3s;
    div {
      height: 55%;
      img {
        width: 80%;
      }
      // background: blue;
    }
  }
  li:hover {
    -webkit-box-shadow: #ccc 0px 10px 10px;
    -moz-box-shadow: #ccc 0px 10px 10px;
    box-shadow: #ccc 0px 10px 10px;
  }
}
</style>
